<template>
	<view class="search-container" :class="themeName" :style="{
    padding: `${$px2rpx(fieldStyles.sub_padding_top)}rpx ${$px2rpx(fieldStyles.sub_padding_horizontal)}rpx ${$px2rpx(fieldStyles.sub_padding_bottom)}rpx`,
    'background-color': fieldStyles.content_bg_color,
  }">

		<view class="flex row-between p-10">
			<view style="font-size:44rpx;">{{ fieldCommon.title }}专区</view>
			<view>
				<u-icon name="grid-fill" size="40" :color="brandCardStyle === 'square'?'red':''" class="m-r-10"
					@click="brandCardStyle ='square' "></u-icon>
				<u-icon name="list" size="46" :color="brandCardStyle === 'rectangle'?'red':''"
					@click="brandCardStyle ='rectangle'"></u-icon>
			</view>
		</view>
		<!-- 商品列表 -->
		<mescroll-body ref=" mescrollRef" :up="{
          auto: true,
          noMoreSize: 10,
          empty: {
			icon: $getImageUri('resource/image/shopapi/uniapp/empty/shop.png'),
            tip: $zhTran('没有找到品牌~'),
            fixed: true,
          },
			toTop: {
				bottom: 300
			},
        }" @init="mescrollInit" @down="downCallback" @up="upCallback" :bottom="100">
			<view :class="[
				'goods-lists',
				{ 'goods--square': brandCardStyle === 'square' },
				{ 'goods--rectangle': brandCardStyle === 'rectangle' },
			]">
				<view class="goods-wrap" v-for="item,idx in brandList" :key="idx" @click="goBrandDetail(item.id)">
					<view class="goods-item" :class="[{
							'flex':brandCardStyle != 'square' ,
							'col-top':brandCardStyle != 'square'
						}]" :style="{
					  'background-color': fieldStyles.bg_color,
					  'margin': `${$px2rpx(fieldStyles.sub_margin)}rpx`,
					  'padding': `${$px2rpx(fieldStyles.sub_padding)}rpx`,
					}">
						<view class="goods-images" :style="[imageStyle]">
							<u-image width="100%" height="100%" :src="item.image" mode="aspectFit" />
						</view>
						<view class="goods-info" :class="['m-t-10',{ 
								'p-5': brandCardStyle == 'square' ,
								 'text-center': brandCardStyle == 'square',
								'm-l-10': brandCardStyle != 'square' , 
							}]">
							<view class="goods-name line-2">{{ item.name }}</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<tabbar :common="fieldCommon" />

	</view>
</template>

<script>
	import {
		apiGetPage
	} from "@/api/store";
	import {
		apiBrandLists,
	} from "@/api/goods";
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";

	export default {
		mixins: [MescrollMixin],

		data() {
			return {
				brandList: [],
				brandCardStyle: '', // 商品卡片样式: square -正方形; rectangle -长方形
				fieldShowHide: {},
				fieldStyles: {},
				fieldCommon: {},
				imgWidth: '',
				show_type: ''
			};
		},
		computed: {
			imageStyle() {
				return {
					width: `${this.imgWidth}rpx`,
					height: `${this.imgWidth}rpx`
				}
			},
		},
		watch: {
			brandCardStyle(val) {
				if (val == 'square') {
					var query = uni.createSelectorQuery(),
						that = this;
					query.select('.goods-item').boundingClientRect(function(rect) {
						if (that.brandCardStyle == 'square') {
							that.imgWidth = rect.width
						}
					}).exec();
					query.selectViewport().scrollOffset().exec()
				} else {
					this.imgWidth = 240
				}
			}
		},
		methods: {
			// 初始化Mescroll
			mescrollInit(mescroll) {
				console.log(mescroll);
				this.mescroll = mescroll;
			},

			// 下拉刷新
			downCallback() {
				this.mescroll.resetUpScroll();
			},

			// 上拉加载更多
			upCallback({
				num,
				size
			}) {

				apiBrandLists({
						page_no: num,
						page_size: size,
					})
					.then(({
						lists,
						page_size,
						count,
						extend
					}) => {
						// 如果是第一页需手动置空列表
						if (num == 1) this.brandList = [];
						// 重置列表数据
						this.brandList = [...this.brandList, ...lists];
						this.brandList = this.$zhTran(this.brandList)
						this.mescroll.endSuccess(lists.length, count);
					})
					.then(() => {
						this.brandCardStyle = this.show_type
					})
					.catch(() => {
						this.mescroll.endErr();
					});
			},

			// 获取分类信息
			getCategoryInfo() {
				apiGetPage({
					type: 6,
				}).then((nres) => {
					let res = this.$zhTran(nres)

					uni.setNavigationBarTitle({
						title: this.$zhTran(res.common.title)
					})

					this.fieldCommon = res.common
					this.show_type = res.content[0].content.show_type
					this.fieldStyles = res.content[0].styles
				});
			},


			// 跳转商品详情
			goBrandDetail(id) {
				this.$Router.push({
					path: "/bundle/pages/brand/category",
					query: {
						id,
					},
				});
			},
		},
		onShow() {
			this.getCategoryInfo()
		},

		onLoad() {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}
			const options = this.$Route.query;

			this.getCategoryInfo()
		},
	};
</script>

<style lang="scss" scoped>
	.search-container {
		display: flex;
		flex-direction: column;
	}

	.goods-lists {

		.goods-info {
			.goods-name {
				height: 60rpx;
			}
		}
	}

	.goods {

		&--square {
			display: flex;
			flex-wrap: wrap;

			.goods-wrap {
				width: 50%;
			}

			.goods-images {
				max-width: 100%;
				max-height: 100%;
				width: auto;
				height: auto;
			}
		}

		&--rectangle {}
	}
</style>